/* pages/order/detail/detail.wxss */
.detail-page {
  min-height: 100vh;
  background-color: #F9FAFC;
  padding-top: 20rpx;
  box-sizing: border-box;

  .card {
    width: 698rpx;
    margin: 0 auto;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 20rpx;

    .name {
      font-size: 34rpx;
    }

    .date {
      padding-top: 10rpx;
      font-size: 32rpx;
    }
  }

  .detail-card {
    width: 698rpx;
    margin: 20rpx auto 0 auto;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 20rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold;
    }

    .cell {
      display: flex;
      padding: 10rpx 0;

      .label {
        font-size: 30rpx;
      }

      .value {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        font-size: 30rpx;

        .texts {
          display: flex;
          flex-wrap: wrap;
          font-size: 30rpx;

          .text {
            padding-right: 15rpx;
            position: relative;

            &:not(:first-child) {
              padding-left: 15rpx;
            }

            &:not(:last-child) {
              &:before {
                content: "";
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 2rpx;
                height: 20rpx;
                background-color: #333;
              }
            }
          }
        }

        .img {
          image {
            width: 150rpx;
            height: 150rpx;
            border-radius: 10rpx;
          }
        }
      }
    }
  }

  .action-bottom {
    position: fixed;
    width: 750rpx;
    bottom: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 24rpx;
    box-sizing: border-box;
    padding-bottom: 24rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 24rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);

    .cu-btn {
      width: 100%;
      height: 80rpx;
      color: #333;
      font-size: 28rpx;
      font-weight: 400;
      border-radius: 50rpx;
    }
  }
}